<template>
  <div class="page-container">
    <el-row>
      <el-col :span="8"></el-col>
      <el-col :span="8">
        <el-input v-model="searchValue" placeholder="搜索" clearable />
      </el-col>
      <el-col :span="8" class="upload-button">
        <el-upload
          accept="image/*"
          :multiple=true
          :http-request="handleUpload"
          :file-list="iconList"
          :show-file-list=false
          :before-upload="handleBeforeUpload"
        >
          <el-button type="primary">
            <ac-icon iconId="018dc9c3efd2131ecc10" />
            <span style="margin-left: 5px;">上传图标</span>
          </el-button>
        </el-upload>
        <el-upload
          style="margin: 0 10px;"
          action=""
          :http-request="handleImport"
          :show-file-list="false"
          accept=".dat"
        >
          <el-button type="success">
            <ac-icon iconId="018ece4f70fcf0627f81" />
            <span style="margin-left: 5px;">导入</span>
          </el-button>
        </el-upload>
        <el-button type="primary" @click="handleExport">
          <ac-icon iconId="018ece4f749ec5911772" />
          <span style="margin-left: 5px;">导出</span>
        </el-button>
      </el-col>
    </el-row>
    <div class="icon">
      <div
        v-for="(icon, index) in iconList.filter(item => searchValue ? item.name.indexOf(searchValue) >= 0 : true)"
        :key="index"
        class="icon-item"
        @click="showIcon(icon)"
      >
        <div class="icon-item-icon">
          <ac-icon :icon="icon" size="30" style="width: 30px;height: 30px;"/>
        </div>
        <div class="icon-item-text">
          <div class="icon-item-name">{{icon.name}}</div>
          <div class="icon-item-code" v-if="icon.status === 1">上传中...</div>
        </div>
        <div class="icon-item-button" v-if="icon.status !== 1">
          <span class="icon-item-copy" @click.stop="copyIcon(icon)">复制</span>
          <span class="icon-item-delete" @click.stop="deleteIcon(icon)" v-if="icon.builtin !== '1'">删除</span>
        </div>
      </div>
    </div>
  </div>

  <el-dialog
    v-model="dialogVisible"
    title="图标查看"
    style="min-height: 500px"
    destroy-on-close
    draggable
    append-to-body
  >
    <div class="dialog-icon">
      <ac-icon color="#999" :size="dialogIcon.type === 'svg' ? '50' : 'auto'" :icon="dialogIcon" />
    </div>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import api from "@/http/api";
import clipboard from 'clipboard';
import { ElMessage, ElMessageBox } from "element-plus";

const iconList = ref([]);
const itemFlag = ref(0);
const searchValue = ref('');
const dialogVisible = ref(false);
const dialogIcon = ref({});

const handleImport = (file) => {
  api.uploadFile('/system/icon/importData', {'file': file.file}).then((res) => {
    ElMessage.success(res.message);
    loadIcon();
  });
};

const handleExport = () => {
  api.downloadFile('/system/icon/exportData').then(res => api.saveFileLocal(res));
};

const handleUpload = (options) => {
  return new Promise((resolve, reject) => {
    api.uploadFile('/system/icon/upload', {'file': options.file}).then((res) => {
      const icon = iconList.value.find(item => item.itemFlag === options.file.itemFlag);
      if (icon) {
        icon.id = res.data.id;
        icon.name = res.data.name;
        icon.type = res.data.type;
        icon.content = res.data.content;
        icon.status = 2;
      }
      resolve();
    }).catch(() => {
      const index = iconList.value.findIndex(item => item.itemFlag === options.file.itemFlag);
      iconList.value.splice(index, 1);
      reject();
    });
  })
};

const handleBeforeUpload = (file) => {
  file.itemFlag = ++itemFlag.value;
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    ElMessage.error("图片大小不能超过 2MB!");
  } else {
    iconList.value.unshift({itemFlag: file.itemFlag, name: file.name, status: 1});
  }

  return isLt2M;
};

const showIcon = (icon) => {
  dialogIcon.value = icon;
  dialogVisible.value = true;
};

const copyIcon = (icon) => {
  clipboard.copy(icon.id);
  ElMessage.success("复制成功");
};

const deleteIcon = (icon) => {
  ElMessageBox.confirm('请确认是否删除？', '提示', {type: 'warning'}).then(() => {
    api.post('/system/icon/delete', {id: icon}).then(res => {
      const index = iconList.value.findIndex(item => item.id === icon.id);
      if (index >= 0) {
        iconList.value.splice(index, 1);
      }
      ElMessage.success(res.message);
    });
  }).catch(() => {});
};

const loadIcon = () => {
  api.post('/system/icon/queryList').then(res => {
    iconList.value = res.data || [];
  });
};

onMounted(() => {
  loadIcon();
});
</script>

<style lang="scss" scoped>
.upload-button {
  display: flex;
  flex-direction: row;
  text-align: right;
  justify-content: flex-end;
}
.icon {
  margin-top: 20px;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, 250px);
  grid-gap: 10px;
  justify-content: center;
  overflow-y: auto;
}
.icon-item {
  width: 250px;
  height: 70px;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: row;

  .icon-item-icon {
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .icon-item-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
    width: 1px;

    .icon-item-name {
      color: #333;
    }
    .icon-item-code {
      color: #999;
      font-size: 12px;
      margin-top: 5px;
    }
  }
  .icon-item-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50px;
  }
  .icon-item-copy {
    color: #67C23A;
    font-size: 14px;
  }
  .icon-item-delete {
    color: red;
    font-size: 14px;
    margin-top: 10px;
  }
}
.icon-item:hover {
  box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
}
.dialog-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
</style>